<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
</head>
<body>

<script>
    // 1. 这是后台传递过来的数据, 这个数据是一个json格式数据
    const 后台_JSON数据 = {
        "code": 200,
        "msg": "获取新闻列表成功",
        "data": [
            {
                "id": 1,
                "title": "5G商用自己，三大运用商收入下降",
                "count": 58
            },
            {
                "id": 2,
                "title": "国际媒体头条速览",
                "count": 56
            },
            {
                "id": 3,
                "title": "乌克兰和俄罗斯持续冲突",
                "count": 1669
            },
        ]
    }

    // 实际开发,前端从后台拿的数据就是json数据,而一般真正需要用的是 data数组里的数据

    // 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
    const {data} = 后台_JSON数据 // 因为只要data的数据, 使用对象解构 的方式
    console.log(data) // 控制台看信息, data是数组.  注意:原 "后台_JSON数据" 里,data属性的值就是一个数组,数组里元素是对象




    // 需求2： 上面是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
    // 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData

    function 渲染数据({data: myData}) {  // data变量名, 改为 myData
        // const { data } = 后台_JSON数据 // 相对于这种,只是我们直接在参数里 {data},这样直接对象解构
        console.log(myData) // 数组
    }

    渲染数据(后台_JSON数据)
    // 特别说明: 函数这里,直接传实参是 要解构的对象, 形参是 {data}, 这样直接对象解构
</script>

</body>
</html>